<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <!--按钮-->
        <button id="btn">点击提交</button>
</body>
</html>
<script>
// 防抖又叫为函数防抖（debounce）：指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。
// 前端开发中，常见的事件如，onresize，scroll，mousemove** ,mousehover 等会短时间内多次触发（频繁触发），不做限制的话可能一秒执行几百次，
// 在这些函数内部如果还执行了其他函数，尤其是执行了操作 dom 的函数的话浏览器操作 DOM 是很耗费性能的），那不仅会浪费计算机资源，
// 还会降低程序运行速度，甚至造成浏览器卡死、崩溃。
// 除此之外，短时间内重复调用 ajax 还会造成网络拥堵，增加服务器压力等问题。


var num = 1;
        const seckill = () => {
            console.log('我是防抖，你点击了按钮' + num++)
        }

        // 防抖函数
        const debounce = (fun, wait) => {
            let timeout;
            return function () {
                if (timeout) {
                    clearTimeout(timeout);
                }
                //第一次执行任务，timeout是null，此时callNow是true，需要立即执行
                let callNow = !timeout;
                timeout = setTimeout(() => {
                    timeout = null;
                }, wait);
                if (callNow) {
                    fun.apply(this);
                }
            }
        };
        //点击提交按钮
        let btn = document.getElementById('btn');
        //调用方法（ 1s内只允许一次操作）
        btn.addEventListener('click', debounce(seckill, 1000));  


//         防抖和节流的区别
// 函数防抖：是n秒内只执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间.

// 函数节流：是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。



   // 实现new
   function Test(name) {
        this.name = name
    }

    Test.prototype.sayName = function () {
        console.log(this.name)
    }

    function createMy(Con, ...args) {
        let obj = Object.create(Con.prototype)
//   Object.setPrototypeOf(obj={}, Con.prototype)
        let result = Con.apply(obj, args)
        return result instanceof Object ? result : obj
    }

    let t = createMy(Test, 'ycl')
    console.log(t.name)  // ycl
    t.sayName() // ycl
</script>